<template>
	<view class="container">
		<!-- <CustomNavbar title="注册" /> -->

		<!-- 主内容区 -->
		<view class="content">
			<text class="title">您好，欢迎注册宮補堂</text>

			<!-- 表单区域 -->
			<view class="form">
				<view class="input">

					<input placeholder="请输入账号" placeholder-class="placeholder" v-model="formData.username" />
				</view>
				<view class="input">

					<input password placeholder="请输入密码" placeholder-class="placeholder" v-model="formData.password" />
				</view>
				<view class="input">

					<input password placeholder="请输入支付密码" placeholder-class="placeholder"
						v-model="formData.pay_password" />
				</view>
				<view class="input">

					<input placeholder="请输入邀请" placeholder-class="placeholder" v-model="formData.invite_code" />
				</view>


				<view class="forget-pwd">
					<text class="link-text register" @click="goPage('/pages/login/login')">去登录</text>
				</view>
				<button class="login-btn" @click="register">注册</button>


			</view>
			<view class="agreement">
				<image :src="isChecked?'/static/index_slices/checked.png':'/static/index_slices/check.png'"
					mode="widthFix" @click="isChecked=!isChecked"></image>
				<text>我已阅读并同意</text>《宮補堂 <text class="link-text">注册协议</text>》

			</view>
			<text class="tipInfo" v-if="!isChecked&&!agree">请阅读并同意协议</text>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import CustomNavbar from '@/components/CustomNavbar.vue';
	
	const formData = reactive({
		username: '',
		password: '',
		pay_password: '',
		invite_code: ''
	})
	onLoad((optiops) => {
	  if(optiops.invite_code){
		  formData.invite_code = optiops.invite_code
	  }
	})

	// 选中状态
	const isChecked = ref(false)
	const agree = ref(true)
	//跳转
	const goPage = (url) => {
		uni.navigateTo({
			url
		})
	}
	// 注册
	const register = () => {
		if (!isChecked.value) return agree.value = false
		console.log(formData)
		uni.$api.user.register(formData).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg
				})
				uni.setStorageSync('user_token', res.data.user_token)
				setTimeout(function() {
					uni.switchTab({
						url: '/pages/my/my'
					})
				}, 1000)
			}
		})
	}
</script>
<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background: linear-gradient(0deg, #F3F6FA, #FF413B);
		background-size: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		// height: calc(100vh - 88rpx);
		// padding-top: 28rpx;
		color: #ffffff;
	}



	.content {
		box-sizing: border-box;
		flex: 1;
		padding: 180rpx 60rpx;
		display: flex;
		flex-direction: column;

	}

	.title {
		font-size: 46rpx;
		font-weight: bold;
		margin-bottom: 61rpx;
		text-align: left;
	}

	.welcome {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 80rpx;
	}

	.form {
		width: 100%;

		image {
			width: 25rpx;
			margin: 0 18rpx 0 26rpx;
		}
	}

	.input {
		width: 100%;
		box-sizing: border-box;
		height: 94rpx;
		margin-bottom: 40rpx;
		font-size: 28rpx;
		background-color: #F7F7F7;
		border-radius: 26rpx;
		display: flex;
		align-items: center;
		padding-left: 31rpx;
		color: #000;

		.placeholder {
			color: #999;
		}
	}

	.forget-pwd {
		color: #fff;
		text-align: right;
		margin-top: 45rpx;
		margin-bottom: 40rpx;

		.lien-text {
			font-size: 28rpx;
			color: #fff;
		}
	}

	.login-btn {
		width: 620rpx;
		height: 98rpx;
		background: linear-gradient(to right, #FF5A55, #FD3832);
		color: white;
		font-size: 36rpx;
		border-radius: 10rpx;
		line-height: 98rpx;
		border: none;
	}




	.agreement {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 24rpx;
		color: #666;

		image {
			width: 26rpx;
			margin-right: 15rpx;
			margin-left: 10rpx;
		}

		.link-text {
			position: relative;
			// color: #0090FF;
			text-decoration: underline;
			// margin-left: 8rpx;
		}
	}

	.tipInfo {
		color: #FD3832;
		font-size: 26rpx;
		padding-top: 20rpx;
		padding-left: 20rpx;
	}
</style>